<template>
  <div>
    <a-modal
      :title="modalTitle"
      :visible="visible"
      :confirm-loading="confirmLoading"
      width="80%"
      :closable="true"
      wrapClassName="commonModalRoot"
      :maskClosable="true"
      :footer="null"
      @cancel="handleCancel"
    >
      <a-table
        v-if="showATable"
        @change="handleTableChange"
        ref="dataTable"
        :pagination="pagination"
        :columns="columns"
        :rowKey="record => record.id"
        :data-source="data"
      >
        <span slot="action" slot-scope="record, index">
          <a-input v-model="record.key"></a-input>
        </span>
      </a-table>
    </a-modal>
  </div>
</template>
<script>
import { getAction } from '@/api/manage'
export default {
    data () {
        return {
            pagination: {
              total: 0,
              current:1,
              pageSize: 10,//每页中显示10条数据
              showSizeChanger: true,
              pageSizeOptions: ["10", "20", "50", "100"],//每页中显示的数据
              showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
            },
            showATable: true,
            form: this.$form.createForm(this, { name: 'advanced_search' }),
            selectObj: '',
            searchObj: {},
            ModalText: 'Content of the modal',
            visible: false,
            confirmLoading: false,
            data: []
        }
    },
    watch: {
        // visible (newName, oldName) {
        //   console.log('vvvvvvvvvvvvvvvvvvvvv',newName)
        //     if (newName) {
        //         if (!this.selectType) {
        //             this.selectType = 'radio'
        //         }
        //         this.searchObj = {};
        //         this.searchArr.forEach((e) => {
        //             this.searchObj[e.key] = '';
        //             if (e.value) {
        //                 this.searchObj[e.key] = e.value
        //             }
        //         })
        //         this.showATable = false
        //         this.$nextTick(() => {
        //             this.showATable = true
        //         })
        //         console.log('ggg', this.searchObj)
        //         this.getTableData()
        //
        //     }
        // }
    },
    computed: {
    },
    props: {
        modalTitle: String,
        apiUrl: String,
        columns: Array,
    },
    mounted () {
    },
    methods: {
        // rowClick(record){
        //   this.handleTableChange(record)
        // },
        getSelectData () {
            this.$forceUpdate()
        },
        changeSelect (index, val) {
            this.selectObj = val
        },
      handleTableChange (pagination) {
        this.pagination.current = pagination.current;
        this.pagination.pageSize = pagination.pageSize;
        this.getTableData();
      },
        getTableData () {
            let params = {
                pageNo: this.pagination.current,
                pageSize: this.pagination.pageSize
            }
            let that = this
            getAction(this.apiUrl, params).then((res) => {
                if (res.success && res.result) {
                  if(res.result.records){
                    this.data = res.result.records
                    this.pagination.total = res.result.total;
                  }else{
                    this.data = res.result
                    this.pagination.total = res.result.length;
                  }
                } else {
                    that.$message.warning(res.message)
                }   
            }).finally(() => {
                // that.close();
            })
        },
        open () {
          this.visible = true
          this.showATable = false
          this.$nextTick(() => {
            this.showATable = true
          })
          this.getTableData()
        },
        handleCancel (e) {
            this.close()
        },
        close () {
            this.$emit('close')
            this.visible = false
        }
    }
}
</script>
<style>
    .ant-advanced-search-form {
        padding: 24px;
        background: #fbfbfb;
        border: 1px solid #d9d9d9;
        border-radius: 6px;
    }

    .ant-advanced-search-form .ant-form-item {
        display: flex;
    }

    .ant-advanced-search-form .ant-form-item-control-wrapper {
        flex: 1;
    }

    #components-form-demo-advanced-search .ant-form {
        max-width: none;
    }
    #components-form-demo-advanced-search .search-result-list {
        margin-top: 16px;
        border: 1px dashed #e9e9e9;
        border-radius: 6px;
        background-color: #fafafa;
        min-height: 200px;
        text-align: center;
        padding-top: 80px;
    }
    .commonModalRoot .ant-modal-body{
      max-height:70vh;
      overflow: auto;
    }
</style>
